import React from 'react';
import { RobotInfo } from '../../types';

interface RobotStatusProps {
  robots: RobotInfo[];
  onSelectRobot: (robotId: string) => void;
}

export function RobotStatus({ robots, onSelectRobot }: RobotStatusProps) {
  // 定义排序函数，按机器人状态排序
  const sortedRobots = [...robots].sort((a, b) => {
    const statusOrder: { [key: string]: number } = {
      BUSY: 1,  // 运送中状态优先
      FREE: 2,  // 空闲状态最后
      // 可以继续添加其他状态，按优先级排序
    };
    return statusOrder[a.robotStatus] - statusOrder[b.robotStatus];
  });

  return (
    <div
      className="bg-white p-4 rounded-lg shadow-md max-w-md w-full"
      style={{ height: '50vh' }} 
    >
      <h2 className="text-xl font-bold mb-4">机器人状态</h2>
      <div className="space-y-4 max-h-96 overflow-y-auto"> {/* 添加滚动条 */}
        {sortedRobots.map((robot) => (
          <div
            key={robot.serialNumber}
            onClick={() => onSelectRobot(robot.serialNumber)}
            className="p-3 border rounded-md hover:bg-gray-50 cursor-pointer"
          >
            <div className="flex items-center justify-between">
              <span className="font-medium">
                机器人 #{robot.serialNumber}
                {robot.serialNumber === '132123' && (
                  <span className="ml-2 text-xs text-green-500 bg-green-100 px-2 py-1 rounded-full">
                    智能发药机
                  </span>
                )}
              </span>
              <span
                className={`px-2 py-1 rounded-full text-sm ${
                  robot.robotStatus === 'FREE'
                    ? 'bg-gray-100 text-gray-800'
                    : robot.robotStatus === 'MOVING'
                    ? 'bg-red-100 text-red-800'
                    : 'bg-yellow-100 text-yellow-800'
                }`}
              >
                {robot.robotStatus === 'FREE'
                  ? '空闲'
                  : robot.robotStatus === 'MOVING'
                  ? '运送中'
                  : '排队中'}
              </span>
            </div>
            <div className="mt-2 text-sm text-gray-500">
              <p>位置: ({robot.position.x}, {robot.position.y})</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
